<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>活动页</title>
    <link rel="icon" href="./images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./stylesheets/index.css">
    <link rel="stylesheet" href="./stylesheets/activePage.css">
</head>

<body>
    <!-- 右边悬浮侧边栏开始 -->
    <div class="rightBar"></div>
    <!-- 右边悬浮侧边栏结束 -->

    <!-- 整个顶部开始 -->
    <div class="totalHeader"></div>
    <!-- 整个顶部结束 -->

    <!-- 活动页开始 -->
    <!-- 顶部导航 -->
    <div class="activeTop">
        <img src="https://img2.epetbar.com/nowater/2017-12/05/09/8789310badba16a104f4c66674531164.jpg@!water" alt="">
        <div class="activeTopNav">
            <ul class="clear">
                <li>
                    <a href="#m1">
                        <img src="./images/activePage/topNav1.png" alt="">
                        <p>刚到家</p>
                    </a>
                </li>
                <li>
                    <a href="#m2">
                        <img src="./images/activePage/topNav2.png" alt="">
                        <p>2-3月龄</p>
                    </a>
                </li>
                <li>
                    <a href="#m3">
                        <img src="./images/activePage/topNav3.png" alt="">
                        <p>4-5月龄</p>
                    </a>
                </li>
                <li>
                    <a href="#m4">
                        <img src="./images/activePage/topNav4.png" alt="">
                        <p>6月龄-成年</p>
                    </a>
                </li>
                <li>
                    <a href="#m5">
                        <img src="./images/activePage/topNav5.png" alt="">
                        <p>生病了</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 页面主要内容 -->
    <div class="activeContent">
        <!-- 背景图 -->
        <img class="imgBg"
            src="https://img2.epetbar.com/nowater/2016-10/26/10/912755e08855a0c12810e5b4a2984854.jpg@!water" alt="">
        <div class="modulesCon">
            <div id="m1" class="modulesDiv">
                <div class="title">
                    <img src="./images/activePage/topNav1.png" alt="">
                    <div>
                        <h3>刚到家</h3>
                        <p>3条相关</p>
                    </div>
                </div>
                <div class="articles">
                    <img src="./images/activePage/tip1.jpg" alt="">
                    <ul class="clear">
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="m2" class="modulesDiv">
                <div class="title">
                    <img src="./images/activePage/topNav2.png" alt="">
                    <div>
                        <h3>2-3月龄</h3>
                        <p>4条相关</p>
                    </div>
                </div>
                <div class="articles">
                    <img src="./images/activePage/tip2.jpg" alt="">
                    <ul class="clear">
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="m3" class="modulesDiv">
                <div class="title">
                    <img src="./images/activePage/topNav3.png" alt="">
                    <div>
                        <h3>4-5月龄</h3>
                        <p>5条相关</p>
                    </div>
                </div>
                <div class="articles">
                    <img src="./images/activePage/tip3.jpg" alt="">
                    <ul class="clear">
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="m4" class="modulesDiv">
                <div class="title">
                    <img src="./images/activePage/topNav4.png" alt="">
                    <div>
                        <h3>6月龄-成年</h3>
                        <p>3条相关</p>
                    </div>
                </div>
                <div class="articles">
                    <img src="./images/activePage/tip4.jpg" alt="">
                    <ul class="clear">
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="m5" class="modulesDiv">
                <div class="title">
                    <img src="./images/activePage/topNav5.png" alt="">
                    <div>
                        <h3>生病了</h3>
                        <p>3条相关</p>
                    </div>
                </div>
                <div class="articles">
                    <img src="./images/activePage/tip5.jpg" alt="">
                    <ul class="clear">
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="picture">
                                    <img src="./images/activePage/mcon101.png" alt="">
                                    <div class="watch">
                                        <img src="./images/activePage/watching.png" alt="">
                                        <span>55143</span>
                                    </div>
                                </div>
                                <p class="des">第一次养狗，这么准备才周全</p>
                                <div class="artText">
                                    <img src="./images/activePage/ql.png" alt="">
                                    <span>养狗需要提前准备很多物品的，如果该买的东西还没有买，狗狗到家后会...</span>
                                    <img src="./images/activePage/qr.png" alt="">
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="more">
                <img src="./images/activePage/more_activity.png" alt="">
            </div>
        </div>

    </div>

    <!-- 楼梯效果 -->
    <div class="stairs">
        <img src="./images/activePage/hat_dog.png" alt="">
        <ul>
            <li>
                <img class="line" src="./images/activePage/gradients_line.jpg" alt="">
                <img src="./images/activePage/pet_class_room.png" alt="">
            </li>
            <li>
                <img src="./images/activePage/gradients_line.jpg" alt="">
                <a href="#">刚到家</a>
            </li>
            <li>
                <img src="./images/activePage/gradients_line.jpg" alt="">
                <a href="#">2-3月龄</a>
            </li>
            <li>
                <img src="./images/activePage/gradients_line.jpg" alt="">
                <a href="#">4-5月龄</a>
            </li>
            <li>
                <img src="./images/activePage/gradients_line.jpg" alt="">
                <a href="#">6月龄-成年</a>
            </li>
            <li>
                <img src="./images/activePage/gradients_line.jpg" alt="">
                <a href="#">生病了</a>
            </li>
        </ul>
    </div>
    <!-- 活动页结束 -->

    <!-- 页面最底部开始 -->
    <div class="footer"></div>
    <!-- 页面最底部结束 -->

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="./scripts/common.js"></script>
    <script src="./scripts/activePage.js"></script>
</body>

</html>